<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <!-- 注意导包顺序 -->
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <title>下拉菜单</title>
</head>

<body>
    <div class="container">
        <!-- 基础的下拉菜单 -->
        <div class="dropdown">
            <!-- 注意：toggle不要打错 -->
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">苹果</a>
                <a href="#" class="dropdown-item">香蕉</a>
                <a href="#" class="dropdown-item">西瓜</a>
            </div>
        </div>
        <hr>
        <!-- .dropleft左边弹出 -->
        <div class="dropleft">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">左拉菜单</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">苹果</a>
                <a href="#" class="dropdown-item">香蕉</a>
                <a href="#" class="dropdown-item">西瓜</a>
            </div>
        </div>
        <hr>
        <!-- .dropleft右边弹出 -->
        <div class="dropright">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">右拉菜单</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">苹果</a>
                <a href="#" class="dropdown-item">香蕉</a>
                <a href="#" class="dropdown-item">西瓜</a>
            </div>
        </div>
        <hr>
        <!-- .dropleft上方弹出 -->
        <div class="dropup">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">上拉菜单</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">苹果</a>
                <a href="#" class="dropdown-item">香蕉</a>
                <a href="#" class="dropdown-item">西瓜</a>
            </div>
        </div>
        <hr>
        <!-- 下拉标题和分割符 -->
        <div class="dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单</button>
            <div class="dropdown-menu">
                <!-- 在h标签上添加.dropdown-header实现下拉标题 -->
                <h5 class="dropdown-header">北海</h5>
                <a href="#" class="dropdown-item">海城区</a>
                <a href="#" class="dropdown-item">银海区</a>
                <a href="#" class="dropdown-item">铁山港区</a>
                <a href="#" class="dropdown-item">合浦县</a>
                <!-- .dropdown-divider创建分隔符 -->
                <div class="dropdown-divider"></div>
                <h5 class="dropdown-header">钦州</h5>
                <a href="#" class="dropdown-item">钦北区</a>
                <a href="#" class="dropdown-item">钦南区</a>
                <a href="#" class="dropdown-item">灵山县</a>
                <a href="#" class="dropdown-item">浦北县</a>
            </div>
        </div>
        <hr>
        <div class="dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单</button>
            <div class="dropdown-menu">
                <!-- active让选项显示为被选中状态 -->
                <a href="#" class="dropdown-item active">苹果</a>
                <!-- disabled让选项显示为禁用状态，无法被选中 -->
                <a href="#" class="dropdown-item disabled">香蕉</a>
                <a href="#" class="dropdown-item">西瓜</a>
            </div>
        </div>
        <hr>
        <!-- 分割下拉菜单 -->
        <div class="btn-group">
            <button type="button" class="btn btn-primary">下拉菜单</button>
            <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                <span class="sr-only">下拉菜单</span>
            </button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">苹果</a>
                <a href="#" class="dropdown-item">香蕉</a>
                <a href="#" class="dropdown-item">西瓜</a>
            </div>
        </div>
        <hr>
        <!-- 控制下拉菜单的大小 -->
        <div class="dropdown">
            <!-- 在下拉菜单的按钮上添加btn-lg可以让按钮变大 -->
            <button type="button" class="btn btn-primary dropdown-toggle btn-lg" data-toggle="dropdown">下拉菜单</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">苹果</a>
                <a href="#" class="dropdown-item">香蕉</a>
                <a href="#" class="dropdown-item">西瓜</a>
            </div>
        </div>
        <hr>
        <!-- 分割下拉菜单只需要按钮组添加.btn-group-lg就可以让分割下拉菜单变大 -->
        <div class="btn-group btn-group-lg">
            <button type="button" class="btn btn-primary">下拉菜单</button>
            <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                <span class="sr-only">下拉菜单</span>
            </button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">苹果</a>
                <a href="#" class="dropdown-item">香蕉</a>
                <a href="#" class="dropdown-item">西瓜</a>
            </div>
        </div>
        <hr>
        <div class="dropdown">
            <!-- 在下拉菜单的按钮上添加btn-sm可以让按钮变小 -->
            <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown">下拉菜单</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">苹果</a>
                <a href="#" class="dropdown-item">香蕉</a>
                <a href="#" class="dropdown-item">西瓜</a>
            </div>
        </div>
        <hr>
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-primary">下拉菜单</button>
            <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                <span class="sr-only">下拉菜单</span>
            </button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">苹果</a>
                <a href="#" class="dropdown-item">香蕉</a>
                <a href="#" class="dropdown-item">西瓜</a>
            </div>
        </div>
    </div>
</body>

</html>